<script setup>
import { ref } from "vue";
import { VueUiOnion } from "vue-data-ui";
import "vue-data-ui/style.css";
import Api from "@/api/backend/api";
import XEUtils from "xe-utils";
const datetime = ref(XEUtils.toDateString(new Date(), `yyyy-MM-dd HH:mm:ss`));
const config = ref({
  responsive: false,
  theme: "",
  customPalette: [],
  useCssAnimation: true,
  useStartAnimation: true,
  useBlurOnHover: true,
  style: {
    fontFamily: "inherit",
    chart: {
      backgroundColor: "#FFFFFF",
      color: "#1A1A1A",
      useGradient: true,
      gradientIntensity: 20,
      layout: {
        maxThickness: 64,
        gutter: {
          color: "#e1e5e8",
          width: 0.62,
        },
        track: {
          width: 0.62,
        },
        labels: {
          show: true,
          fontSize: 14,
          color: "#1A1A1A",
          roundingValue: 0,
          roundingPercentage: 0,
          bold: true,
          offsetX: 0,
          offsetY: 0,
          value: {
            show: true,
            formatter: null,
          },
          percentage: {
            show: true,
          },
        },
      },
      title: {
        text: "Title",
        color: "#1A1A1A",
        fontSize: 20,
        bold: true,
        textAlign: "center",
        paddingLeft: 0,
        paddingRight: 0,
        subtitle: {
          color: "#A1A1A1",
          text: "",
          fontSize: 16,
          bold: false,
        },
      },
      legend: {
        show: true,
        bold: true,
        backgroundColor: "#FFFFFF",
        color: "#1A1A1A",
        fontSize: 14,
        roundingValue: 0,
        roundingPercentage: 0,
      },
      tooltip: {
        show: true,
        color: "#1A1A1A",
        backgroundColor: "#FFFFFF",
        fontSize: 14,
        customFormat: null,
        borderRadius: 4,
        borderColor: "#e1e5e8",
        borderWidth: 1,
        backgroundOpacity: 100,
        position: "center",
        offsetY: 24,
        showValue: true,
        showPercentage: true,
        roundingValue: 0,
        roundingPercentage: 0,
      },
    },
  },
  userOptions: {
    show: true,
    buttons: {
      tooltip: true,
      pdf: true,
      csv: true,
      img: true,
      table: true,
      labels: false,
      fullscreen: true,
      sort: false,
      stack: false,
      animation: false,
    },
    buttonTitles: {
      open: "Open options",
      close: "Close options",
      tooltip: "Toggle tooltip",
      pdf: "Download PDF",
      csv: "Download CSV",
      img: "Download PNG",
      table: "Toggle table",
      fullscreen: "Toggle fullscreen",
    },
  },
  table: {
    show: false,
    responsiveBreakpoint: 400,
    th: {
      backgroundColor: "#FFFFFF",
      color: "#1A1A1A",
      outline: "none",
    },
    td: {
      backgroundColor: "#FFFFFF",
      color: "#1A1A1A",
      outline: "none",
      roundingValue: 0,
      roundingPercentage: 0,
    },
    translations: {
      value: "Value",
      percentage: "Percentage",
      serie: "Series",
    },
  },
});
const historyData = ref([]);
const newiestData = ref([]);
const supplierLiveData = ref([]);
const supplierHisData = ref([]);
historyData.value = await Api.mStockController.historyStock({
  datetime: datetime.value,
});
newiestData.value = await Api.mStockController.newiestStock();

const transHisData = computed(() => {
  return historyData.value.map((item) => {
    return {
      name: item.material_name,
      color: `${getRandomColor()}`,
      percentage:item.net_qty,
      value:item.net_qty,
    };
  });
}, [historyData]);

const transLiveData = computed(() => {
  return newiestData.value.map((item) => {
    return {
      name: item.material_name,
      color: `${getRandomColor()}`,
      value: item.net_qty,
      percentage:item.net_qty,
    };
  });
}, [newiestData]);
function getRandomColor() {
  // 生成0到255之间的随机整数
  var r = Math.floor(Math.random() * 256);
  var g = Math.floor(Math.random() * 256);
  var b = Math.floor(Math.random() * 256);
  // 生成0到1之间的随机浮点数作为透明度
  var a = Math.random().toFixed(2); // 保留两位小数

  // 返回rgba格式的颜色字符串
  return `rgba(${r},${g},${b},${a})`;
}
</script>

<template>
  <div style="width: 600px">
    <VueUiOnion :config="config" :dataset="transLiveData" />
  </div>
</template>
